<template>
  <el-container class="xt-box">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :default-openeds="['1', '3']">
          <div class="el-top-head"><span>XXXX系统管理</span></div>
          <template v-for="(i, j) in obj" :key="j">
            <el-menu-item :index="i.name">
              <el-icon v-show="i.icon == 'User'"><UserFilled /></el-icon>
              <el-icon v-show="i.icon == 'Office'"><OfficeBuilding /></el-icon>
              <el-icon v-show="i.icon == 'Setters'"><Menu></Menu></el-icon>
              <el-icon v-show="i.icon == 'Amsters'"><Avatar /></el-icon>
              <span>{{ i.name }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { reactive } from "vue";
// 导航列表
let obj = reactive([
  {
    name: "用户管理",
    // path:'',
    nameR: "User",
    icon: "User",
  },
  {
    name: "部门管理",
    // path:'',
    // nameR:'User',
    icon: "Office",
  },
  {
    name: "权限管理",
    // path:'',
    // nameR:'User',
    icon: "Setters",
  },
  {
    name: "管理员",
    // path:'',
    // nameR:'User',
    icon: "Amsters",
  },
]);
</script>

<style scoped lang="scss">
.xt-box {
  width: 100%;
  height: 100%;
  font-size: 20px !important;
  // 右侧导航样式
  .el-aside {
    flex: 0 0 300px;
    max-width: 300px;
    min-width: 300px;
    width: 300px;
    height: 100%;
    .el-top-head {
      margin: 16px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 6px;
      box-sizing: border-box;
      color: #ffffffd9;
      font-size: 30px;
      line-height: 38px;
      font-weight: 400;
      text-align: center;
    }
    .el-menu {
      height: 100%;
      border: none;
      .el-menu-item {
        font-size: 20px;
      }
    }
  }
  // 左侧内容样式
  .el-main {
    flex: auto;
    height: 100%;
    background: #f4f4f4;
  }
}
</style>
